FailSafe - A jQuery Plugin to make your App Robust

.:.: How this plugin gonna help you?

Prevention is better than Cure
This is a famous saying and it matters a lot while making robust applications. This plugin does its part to help you achieve that.

FailSafe is a jQuery plugin to help your application work correct even in peril situations. In other words, it takes care of situations like Lost Internet Connectivity and Low Battery Level. When a user loses Internet Connectivity or his laptop's Charge goes down, this plugin shows a very user-friendly message to the user. Optionally, this plugin can also disable some of the elements in the page which may require proper Internet Connectivity or Higher Battery Level to function properly.

.:.: Screenshots

.:.: Spread the Word

Give a few seconds to appreciate my work before we get started on how to use it.

.:.: Getting Started

You need to include a total of 3 files to use this plugin, just keep in mind that failsafe.js file to be included after the jQuery Library -

jQuery Library File
failsafe.css
failsafe.js

<html>
    <head>
        <script src="js/jquery-1.8.3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/failsafe.css"/>
        <script src="js/failsafe.js"></script>
    </head>
</html>

.:.: Usage

Now this is where FailSafe plugin is unique, it can be used in two ways:

Method 1:

If your app makes a XHR request somewhere than you can simply call $.failsafe.onOffline(options) and $.failsafe.onOnline(options) methods like shown below:

var XHR_function = function(url) {
    var xhr;  
    if (window.XMLHttpRequest) {
        xhr=new XMLHttpRequest();
    }
    else {
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.onreadystatechange = function(e) {
        if (xhr.readyState != 4) {
        return;
        }
        if (xhr.status == 200) {
            $.failsafe.onOnline(options);
        } else {
            $.failsafe.onOffline(options);
        }
    };
    xhr.open("GET", url, true);
    xhr.send();
};

Method 2:

If your app doesn't make a XHR request anywhere in the page (like this current page) then call the $.failsafe(options) method like shown below:

<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/failsafe.css"/>
<script src="js/failsafe.js"></script>
<script>$.failsafe({checkUrl:'test.html'});</script>
</head>
</html>

The FailSafe plugin in this page is implemented via "Method 2", the code below shows how its called:

<script>
$(function(){
$.failsafe({checkUrl:'test.html',checkInterval:5000,disableElements:".btn"});
});
</script>

.:.: Download

You can directly download the zip file or goto to GitHub for a Fork or Clone:

Download Download from Github

.:.: Options

Variable	Description	Default Value	Valid Values
`checkUrl`	Link to any accessible file (Not Required for Method 1 but Mandatory for Method2)	`null`	`"index.html"` `"img/picture.png"`
`checkInterval`	Time Interval in milliseconds. After this interval the plugin will check for Internet Connectivity	`10000`	Any Number (possibly greater than 2000 or 3000 depending on your server)
`onlineMsg`	Message shown when the user gets online after being disconnected	Great! You are now online	Any String
`offlineMsg`	Message shown when user is disconnected from the Internet	Oops! you are not connected to the internet	Any String
`chargingMsg`	Message shown when the laptop is plugged-in after the Battery gets below the `chargeThreshold` percentage	Your battery is now charging, carry on with your work!	Any String
`batteryLowMsg`	Message shown when the battery runs below the `chargeThreshold` percentage and is not in charging mode	Battery is quite low to continue, please plug in your laptop!	Any String
`bothDownMsg`	Message shown when both are down, Internet Connectivity as well as Battery	Both, your network as well as battery are down!	Any String
`chargeThreshold`	Percentage of Battery Level after which this plugin will show a message	15	Any number between 0 to 100
`disableElements`	jQuery/CSS Selector of the elements to be Disabled	`null`	`"#id"` `".class-name"`
`checkNet`	Tells the plugin whether to check for Internet Connectivity or not	`true`	Either `true` or `false`
`checkBattery`	Tells the plugin whether to check for Battery or not	`true`	Either `true` or `false`
`removeDelay`	Time delay in milliseconds taken to fade out the message	4000	Any Number

Note: I have shown only some of the Valid Values, there can be many more.

.:.: About the Developer

Hey peeps, I am Ram Patra and I make apps, websites, plugins, and more. After receiving an overwhelming response for my 1st plugin, AnimateScroll, I decided to take a stab at another one, and I ended up with this. Please, feel free to share your feedback on twitter, or on facebook. Thank you!